<template>
  <div class="mapone_box">
    <div class="map_box">
      <div class="map_change">
        <el-button
          type="primary"
          plain
          autofocus
          @click="changeMap(1)"
          size="mini"
          >普通地图</el-button
        >
        <el-button type="primary" plain @click="changeMap(0)" size="mini"
          >卫星地图</el-button
        >
      </div>
      <div class="address_box" id="l-map"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 经纬度
      lng: "103.905428",
      lat: "36.057062",
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.paintingMap();
    });
  },
  methods: {
    paintingMap() {
      // 普通街道视图：BMAP_NORMAL_MAP
      // 三维视图：BMAP_PERSPECTIVE_MAP
      // 卫星视图：BMAP_SATELLITE_MAP
      // 卫星和路网的混合视图：BMAP_HYBRID_MAP
      var bdMap = new BMap.Map("l-map"); // 创建Map实例
      // var point = new BMap.Point(103.905428, 36.057062);
      var point = new BMap.Point(this.lng, this.lat);
      bdMap.centerAndZoom(point, 18); // 初始化地图,设置中心点坐标和地图级别。
      bdMap.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
    },
    //  切换模式
    changeMap(value) {
      if (value) {
        this.paintingMap();
      } else {
        var bdMap = new BMap.Map("l-map", { mapType: BMAP_HYBRID_MAP }); // 创建Map实例
        var point = new BMap.Point(this.lng, this.lat);
        bdMap.centerAndZoom(point, 18); // 初始化地图,设置中心点坐标和地图级别。
        bdMap.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
      }
    },
  },
};
</script>

<style scoped>
.mapone_box {
  width: 100%;
  height: 350px;
}
.address_box {
  height: 100%;
  box-sizing: border-box;
  padding: 0 25px;
}
.map_box {
  position: relative;
  height: 100%;
}
.map_change {
  position: absolute;
  top: 5px;
  z-index: 10;
  right: 5px;
}
.map_change >>> .el-button--mini {
  margin: 0px !important;
}
</style>